// frontend/src/components/Register.js
export const RegisterComponent = {
  props: ['selectedPlatform', 'platformThemeClass', 'platformButtonClass'],
  data() {
    return {
      registerForm: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    showWelcome() {
      this.$emit('show-welcome');
    },
    showLogin() {
      this.$emit('show-login');
    },
    async handleRegister() {
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.$emit('set-message', '两次输入的密码不一致', 'error');
        return;
      }
      
      this.$emit('register', 
        this.registerForm.username, 
        this.registerForm.email, 
        this.registerForm.password,
        this.selectedPlatform
      );
    }
  },
  template: `
    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
          <div class="card shadow-lg border-0 rounded-4">
            <div class="card-header text-white text-center py-4" 
                 :class="platformThemeClass">
              <h3 class="mb-0">
                <i class="bi bi-person-plus me-2"></i>
                {{ selectedPlatform === 'biocloud' ? '库美生物云平台' : '库美大健康平台' }}注册
              </h3>
            </div>
            <div class="card-body p-4">
              <form @submit.prevent="handleRegister">
                <div class="mb-4">
                  <label class="form-label fw-bold">用户名</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-person-badge"></i>
                    </span>
                    <input 
                      type="text" 
                      class="form-control form-control-lg" 
                      v-model="registerForm.username"
                      required
                      placeholder="请输入用户名">
                  </div>
                </div>
                
                <div class="mb-4">
                  <label class="form-label fw-bold">邮箱</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-envelope"></i>
                    </span>
                    <input 
                      type="email" 
                      class="form-control form-control-lg" 
                      v-model="registerForm.email"
                      required
                      placeholder="请输入邮箱">
                  </div>
                </div>
                
                <div class="mb-4">
                  <label class="form-label fw-bold">密码</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-lock"></i>
                    </span>
                    <input 
                      type="password" 
                      class="form-control form-control-lg" 
                      v-model="registerForm.password"
                      required
                      placeholder="请输入密码">
                  </div>
                </div>
                
                <div class="mb-4">
                  <label class="form-label fw-bold">确认密码</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="bi bi-lock-fill"></i>
                    </span>
                    <input 
                      type="password" 
                      class="form-control form-control-lg" 
                      v-model="registerForm.confirmPassword"
                      required
                      placeholder="请再次输入密码">
                  </div>
                </div>
                
                <div class="d-grid gap-3">
                  <button type="submit" class="btn btn-lg rounded-pill" 
                          :class="platformButtonClass">
                    <i class="bi bi-person-check me-2"></i>注册
                  </button>
                  <button type="button" class="btn btn-outline-secondary rounded-pill" 
                          @click="showLogin">
                    <i class="bi bi-box-arrow-in-right me-2"></i>已有账号？立即登录
                  </button>
                  <button type="button" class="btn btn-link" @click="showWelcome">
                    <i class="bi bi-arrow-left me-1"></i>返回首页
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
};